import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva/index';
import {
  Spin,
  Row,
  Empty,
  Col,
  Card,
  Form,
  Input,
  Select,
  Icon,
  Button,
  Dropdown,
  Menu,
  InputNumber,
  DatePicker,
  Modal,
  message,
  Badge,
  Divider,
  Steps,
  Radio,
  Table,
} from 'antd/lib/index';
import moment from 'moment/moment';
import router from 'umi/router';

import StandardTable from '@/components/StandardTable';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
// import ExportJsonExcel from 'js-export-excel';
import ExportJsonExcel from '@/components/XLSXOUT/js-export-excel-custom';

import styles from '../../PositionSystem/FundPosition/Test.less';

const FormItem = Form.Item;
const { Step } = Steps;
const { TextArea } = Input;
const { Option } = Select;
const RadioGroup = Radio.Group;
const getValue = obj =>
  Object.keys(obj)
    .map(key => obj[key])
    .join(',');

/* eslint react/no-multi-comp:0 */
@connect(({ billSituationRule, loading }) => ({
  billSituationRule,
  loading: loading.models.ruleTest,
}))
@Form.create()
class ZYBillSafeSituation extends PureComponent {
  state = {
    filterData: [],
    expandForm: false, // 查询菜单栏 是否显示
    listLoading: false,
    formValues: {
      productId: 2,
      billType: 0,
      orderItem: 0,
      orderType: 0,
      stock: '',
    }, // 查询菜单栏   查询参数
    modalVisible: false,
    updateModalVisible: false,

    selectedRows: [],

    stepFormValues: {},

    dataTradeList: {},
    updateParam: true,

    HistogramModalVisible: false,
    suggestions: [],
    textboxValues: {
      key: '',
      type: 1,
    },
  };

  indexCountColumns = [];

  excelData = [];

  groupRender = (value, row, index) => {
    const obj = {
      children: value,
      props: {},
    };

    if (this.indexCountColumns.length > 0) {
      let isHave = false;
      for (let i = 0; i < this.indexCountColumns.length; i++) {
        if (index === this.indexCountColumns[i].index) {
          isHave = true;
          obj.props.rowSpan = this.indexCountColumns[i].count;
        }
      }
      if (!isHave) {
        if (value) {
          obj.props.rowSpan = 0;
          obj.props.colSpan = 0;
        } else {
          obj.props.rowSpan = 0;
        }
      }
    }
    return obj;
  };

  /*  groupRenderBillId = (value,row, index) => {
    const obj = {
      children: value,
      props: {},
    };
    if (this.indexCountColumns.length>0){
      let isHave = false;
      for (let i = 0; i < this.indexCountColumns.length; i++) {
        if (index ===this.indexCountColumns[i].index){
          isHave = true;
          obj.props.rowSpan = this.indexCountColumns[i].count;
        }
      }
      if (!isHave){
        if (value) {
          obj.props.rowSpan = 0;
          obj.props.colSpan = 0;
        }
      }
    }
    obj.children= <span style={{ color: 'red' }}>{value}</span>;
    return obj;
  } */

  renderContentBase = (value, row, index) => {
    const obj = {
      children: value,
      props: {},
    };
    return obj;
  };

  columns = [
    {
      title: '票据类型',
      dataIndex: 'billName',
      render: this.groupRender,
      key: 'billName',
      width: 100,
    },
    {
      title: 'ISIN',
      dataIndex: 'billId',
      render: this.renderContentBase,
      key: 'billId',
      width: 130,
    },
    {
      title: '票据金额',
      dataIndex: 'amountOfMoney',
      render: this.renderContentBase,
      key: 'amountOfMoney',
      width: 100,
    },
    {
      title: '票息',
      dataIndex: 'billCoupon',
      render: this.renderContentBase,
      key: 'billCoupon',
      width: 110,
    },
    {
      title: '已收票息',
      dataIndex: 'hasDealBillCoupon',
      render: this.renderContentBase,
      key: 'hasDealBillCoupon',
      width: 110,
    },

    {
      title: '最差股票',
      dataIndex: 'stockId',
      render: this.renderContentBase,
      key: 'stockId',
      width: 110,
    },
    {
      title: '最差股票距离执行价比例',
      dataIndex: 'toStrikePriceRate',
      render: this.renderContentBase,
      key: 'toStrikePriceRate',
      width: 140,
    },
    {
      title: '收益率',
      dataIndex: 'profitRate',
      render: this.renderContentBase,
      key: 'profitRate',
      width: 110,
    },

    {
      title: '总收益',
      dataIndex: 'profitValue',
      render: this.renderContentBase,
      key: 'profitValue',
      width: 100,
    },

    {
      title: '到期日',
      dataIndex: 'finalDate',
      render: this.renderContentBase,
      key: 'finalDate',
      width: 100,
    },
  ];

  // 默认加载数据-起始方法
  render() {
    const {
      billSituationRule: { safeBilldata },
      loading,
      total,
    } = this.props;
    const {
      selectedRows,
      modalVisible,
      updateModalVisible,
      stepFormValues,
      listLoading,
    } = this.state;
    const newdata = {
      list: [],
      pagination: '',
    };
    if (safeBilldata.code == 1) {
      newdata.list = safeBilldata.list;
    }

    this.indexCountColumns = [];
    let indexTemp = 0;
    let countTemp = 1;
    for (let i = 0; i < newdata.list.length; i++) {
      newdata.list[i].key = `00${i}`;
      if (newdata.list[i].billCoupon && newdata.list[i].billCoupon > 0) {
        newdata.list[i].billCoupon = `${parseFloat(newdata.list[i].billCoupon * 100).toFixed(2)}%`;
      }
      if (newdata.list[i].profitRate && newdata.list[i].profitRate > 0) {
        newdata.list[i].profitRate = `${parseFloat(newdata.list[i].profitRate * 100).toFixed(2)}%`;
      }
      if (i > 0) {
        if (newdata.list[i].billName === newdata.list[i - 1].billName) {
          countTemp++;
          if (i === newdata.list.length - 1) {
            this.indexCountColumns.push({
              index: indexTemp,
              count: countTemp,
            });
          }
        } else {
          this.indexCountColumns.push({
            index: indexTemp,
            count: countTemp,
          });
          indexTemp = i;
          countTemp = 1;
          if (i === newdata.list.length - 1) {
            this.indexCountColumns.push({
              index: indexTemp,
              count: countTemp,
            });
          }
        }
      }
    }
    this.excelData = newdata;
    return (
      <PageHeaderWrapper title="中银即将到期安全票据">
        <Card bordered={false}>
          <div className={styles.tableList}>
            <div>
              <Button style={{ top: 20, bottom: 30 }} onClick={this.downloadExcel}>
                导出Excel表格
              </Button>
            </div>
            <br />
            <br />
            {newdata.list.length == 0 ? (
              <Empty />
            ) : (
              <Table
                style={{ top: 20 }}
                pagination={false}
                scroll={{ x: 1500 }}
                columns={this.columns}
                dataSource={newdata.list}
                bordered
              />
            )}
          </div>
        </Card>
      </PageHeaderWrapper>
    );
  }

  downloadExcel = () => {
    const data = this.excelData.list; // 表格数据
    const option = {};
    const dataTable = [];
    if (data) {
      for (const i in data) {
        if (data) {
          const obj = {
            票据类型: data[i].billName,
            ISIN: data[i].billId,
            票据金额: data[i].amountOfMoney,
            票息: data[i].billCoupon,
            已收票息: data[i].hasDealBillCoupon,
            最差股票: data[i].stockId,
            最差股票距离执行价比例: data[i].toStrikePriceRate,
            收益率: data[i].profitRate,
            收益: data[i].profitValue,
            到期日: data[i].finalDate,
          };
          dataTable.push(obj);
        }
      }
    }
    const merges = [];
    if (this.indexCountColumns.length > 0) {
      for (let i = 0; i < this.indexCountColumns.length; i++) {
        merges.push({
          s: { c: 0, r: this.indexCountColumns[i].index + 1 },
          e: { c: 0, r: this.indexCountColumns[i].index + this.indexCountColumns[i].count },
        });
      }
    }
    option.merges = merges;
    option.fileName = '中银即将到期安全数据';
    option.datas = [
      {
        sheetData: dataTable,
        sheetName: 'sheet',
        sheetFilter: [
          '票据类型',
          'ISIN',
          '票据金额',
          '票息',
          '已收票息',
          '最差股票',
          '最差股票距离执行价比例',
          '收益率',
          '总收益',
          '到期日',
        ],
        sheetHeader: [
          '票据类型',
          'ISIN',
          '票据金额',
          '票息',
          '已收票息',
          '最差股票',
          '最差股票距离执行价比例',
          '收益率',
          '总收益',
          '到期日',
        ],
        columnWidths: [
          { wpx: 135 },
          { wpx: 135 },
          { wpx: 85 },
          { wpx: 85 },
          { wpx: 85 },
          { wpx: 85 },
          { wpx: 165 },
          { wpx: 85 },
          { wpx: 85 },
          { wpx: 85 },
        ],
      },
    ];

    const toExcel = new ExportJsonExcel(option);
    toExcel.saveExcel();
  };

  // 加载完 之后 再加载 此 方法
  componentDidMount() {
    const { dispatch } = this.props;
    const { formValues } = this.state;
    dispatch({
      type: 'billSituationRule/SafeBill',
      payload: formValues,
      callback: response => {
        let sumAmountOfMoney = 0;
        let sumProfitValue = 0;
        for (let i = 0; i < response.list.length; i++) {
          sumAmountOfMoney += parseFloat(response.list[i].amountOfMoney);
          sumProfitValue += parseFloat(response.list[i].profitValue);
        }
        response.list.push({
          billName: '总计',
          amountOfMoney: sumAmountOfMoney,
          profitValue: sumProfitValue,
        });
      },
    });
  }
}
export default ZYBillSafeSituation;
